<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>信息管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/validation/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jQueryForm/jQueryForm.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script>
        $(function () {
            //修改表单的提交方式,修改成异步
            $("#editForm").ajaxForm(function (data) {
                //当点击提交按钮的时候显示出提示框,表示操作成功
                showDialog("操作成功", function () {
                    //修改浏览器的地址栏
                    location.href = "/employee/list.do";
                });
            });
            //提交表单的操作
            $(".but_submit").click(function () {
                //在提交表单之前,把右边select中option的所有元素默认选中提交
                $(".role_target option").prop("selected",true);
                //最后是要提交表单
               $("#editForm").submit();
            });

            //右移
            $("#select").click(function () {
                //把左边选中的option添加到右边的select作为儿子
                $(".role_src option:selected").appendTo(".role_target");

            });
            //全部右移
            $("#selectAll").click(function () {
                //把左边的所有option添加到右边做儿子
                $(".role_src option").appendTo(".role_target");
            });
            //左移
            $("#deselect").click(function () {
                //跟右移刚好相反
                $(".role_target option:selected").appendTo(".role_src");
            });
            //全部左移
            $("#deselectAll").click(function () {
                //跟全部右移刚好是相反的
                $(".role_target option").appendTo(".role_src");
            });

            //除重操作(先循环出右边的所有option)(文档加载完毕之后就要马上消除重复)
            var arr = $.map($(".role_target option"), function (val) {
                return val.value;
            });
            $.each($(".role_src option"), function (index, ele) {
                $.each(arr, function (i, e) {
                    if (ele.value == e) {//来到这里表示元素已经重复,删除掉
                        $(ele).remove();
                    }
                })
            });


            //管理员的操作
            //先克隆一份角色select元素(连事件也一起克隆)
            var pc = $(".role_all").clone(true);

            //给复选框绑定点击事件
            $("#admin").click(function () {
                //当勾选了管理员,那么此时就删除角色分配
                if(this.checked){
                    //来到这里表示已经勾选了超级管理员
                    $(".role_all").remove();
                }else{
                    //来到这里表示点击了勾选之后又取消了
                    // 所以要把之前克隆好的那一份添加回去
                    $(this).closest("tr").after(pc);
                }
            });

            //这个判断在这里主要是用来判断在点击编辑的时候判断该用户是否是超级管理员的
            //判断是否给该账号超级管理员,如果给,那么就删除掉角色分配
            if($("#admin[name='admin']").prop("checked")){
                //来到这里表示是超级管理员
                $(".role_all").remove();//删除角色分配
            }



            //获取表单对象,调用验证方法
            $("#editForm").validate({
                rules: {
                    name: {
                        required: true,
                        rangelength: [2, 6]
                    },
                    password: {
                        required: true,
                    },
                    repasswrod: {
                        equalTo: "#password"
                    }
                    ,
                    email: {
                        required: true,
                        email: true,
                    },
                    age: {
                        required: true,
                        digits: true,
                        range: [16, 65]
                    }
                },
            });
        });
    </script>
</head>
<body>
<form id="editForm" action="/employee/saveOrUpdate.do" method="post">
    <input type="hidden" name="id" value="${entity.id}">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">用户编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">用户名</td>
                    <td class="ui_text_lt">
                        <input name="name" value="${entity.name}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <%--对于密码,首先要判断是编辑还是新增,如果是编辑的话,不需要显示密码--%>
                <c:if test="${empty entity.id}">
                    <tr>
                        <td class="ui_text_rt" width="140">密码</td>
                        <td class="ui_text_lt">
                            <input type="password" name="password" id="password" class="ui_input_txt02"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="ui_text_rt" width="140">验证密码</td>
                        <td class="ui_text_lt">
                            <input name="repassword" type="password" class="ui_input_txt02"/>
                        </td>
                    </tr>
                </c:if>
                <tr>
                    <td class="ui_text_rt" width="140">Email</td>
                    <td class="ui_text_lt">
                        <input name="email" value="${entity.email}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">年龄</td>
                    <td class="ui_text_lt">
                        <input name="age" value="${entity.age}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">所属部门</td>
                    <td class="ui_text_lt">
                        <select id="dept" name="dept.id" class="ui_select03">
                            <c:forEach items="${depts}" var="dept">
                                <option value="${dept.id}">${dept.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td class="ui_text_rt" width="140">超级管理员</td>
                    <td class="ui_text_lt">
                        <input id="admin" type="checkbox" name="admin" class="ui_checkbox01"/>
                    </td>
                </tr>

                <script>
                    //部门下拉列表的回显
                    $("#dept option[value='${entity.dept.id}']").prop("selected", true);
                    //判断id是否为null,也就是判断当前的操作是编辑还是新增,
                    <c:if test="${not empty entity.id}">
                    //如果是超级管理员,那么此时勾上(当id不等于null的时候,表示的是编辑操作)
                    $("#admin[name='admin']").prop("checked", ${entity.admin});
                    </c:if>
                </script>
                <tr class="role_all">
                    <td class="ui_text_rt" width="140">角色分配</td>
                    <td class="ui_text_lt">
                        <table>
                            <tr>
                                <td>
                                    <select multiple="true" class="ui_multiselect01 role_src">
                                        <c:forEach items="${roles}" var="role">
                                            <option value="${role.id}">${role.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                                <td align="center">
                                    <input type="button" id="select" value="-->" class="left2right"/><br/>
                                    <input type="button" id="selectAll" value="==>" class="left2right"/><br/>
                                    <input type="button" id="deselect" value="<--" class="left2right"/><br/>
                                    <input type="button" id="deselectAll" value="<==" class="left2right"/>
                                </td>
                                <td>
                                    <select multiple="true" name="roleIds" class="ui_multiselect01 role_target">
                                        <c:forEach items="${entity.roles}" var="role">
                                            <option value="${role.id}">${role.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="button" value="确定保存" class="ui_input_btn01 but_submit"/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>